<template>
  <div>
    <BasicTable ref="tableRef" @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> 月度维保任务 </span>
      </template>
      <template #firstColumn="{ record }">
        <a @click="handleForm({ tid: record.tid })">
          {{ record.maintenanceId }}
        </a>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup name="MonthList">
import {
  unref,
  defineProps,
  onMounted,
  ref,
  computed,
  watch,
  Recordable,
  nextTick
} from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { router } from '/@/router';
import { Icon } from '/@/components/Icon';
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
import {
  inMaintenanceInfoDataDelete,
  inMaintenanceInfoDataListData,
  getEquipmentTotalByType,
  getEquipmentTotalByMonth,
  inMaintenanceInfoData
} from '/@/api/maintenance.management/inMaintenanceInfoData';
import { useDrawer } from '/@/components/Drawer';
import { FormProps } from '/@/components/Form';

const { t } = useI18n('maintenance.management.inMaintenanceInfoData');
const { showMessage } = useMessage();
const { meta } = unref(router.currentRoute);

const getTitle = {
  icon: meta.icon || 'i-ant-design:book-outlined',
  value: meta.title || t('月度维保设备信息记录'),
};

const props = defineProps({
  selectedMonth: String, // 新增接收 selectedMonth
  maintenanceId: String, // 新增接收 maintenanceId
  EquipmentTypeRef: String, //设备类型
  EquipmentTypeCode: String, //设备类型编码
  //DetectedStatus: String, //检测状态
});

const TaskData = ref('');
const TaskParams = computed(() => {
  return {
    equipmentName: TaskData.value,
  };
});

const Status=ref('')
const EquipmentType = ref('');

const searchForm: FormProps = {
  baseColProps: { md: 8, lg: 6 },
  labelWidth: 90,
  schemas: [
    {
      label: t(''),
      field: 'status',
      component: 'Select',
      componentProps: {
        placeholder: t('请输入检测状态'),
        options: [
          { label: '已检测', value: '已检测' },
          { label: '未检测', value: '未检测' },
          // { label: '已接受信号', value: '已接受信号' },
        ],
        onSelect:(item)=>{
           console.log(item)
           Status.value=item
        }
      },
    },
    {
      label: t(''),
      field: 'equipmentName',
      component: 'Input',
      componentProps: {
        placeholder: t('请输入设备名称'),
      },
    },
  ],
};

const tableColumns: BasicColumn[] = [
  {
    title: t('设备名称'),
    dataIndex: 'equipmentName',
    key: 'a.equipment_name',
    sorter: true,
    width: 120,
    align: 'left',
  },
  {
    title: t('设备类型名称'),
    dataIndex: 'equipmentType',
    key: 'a.equipment_type',
    sorter: true,
    width: 120,
    align: 'left',
  },
  {
    title: t('检测状态'),
    dataIndex: 'state',
    key: 'a.state',
    sorter: true,
    width: 120,
    align: 'left',
  },
  {
    title: t('设备编码'),
    dataIndex: 'equipmentCode',
    key: 'a.equipment_code',
    sorter: true,
    width: 120,
    align: 'left',
  },
  {
    title: t('设备地址'),
    dataIndex: 'equipmentAddress',
    key: 'a.equipment_address',
    sorter: true,
    width: 120,
    align: 'left',
  },
  {
    title: t('检测时间'),
    dataIndex: 'firstDetectionTime',
    key: 'a.first_detection_time',
    sorter: true,
    width: 160,
    align: 'left',
  },
];

const tableRef = ref(null);
const tableHeight = ref(0);

const currentPage = ref(1);
const pageSize = ref(10);

const [registerTable, { reload }] = useTable({
  api: inMaintenanceInfoData,
  beforeFetch: (params) => {
    // 合并参数
    params = {
      id: props.maintenanceId,
      date: props.selectedMonth,
      type: props.EquipmentTypeRef,
      typeCode: props.EquipmentTypeCode,
      status: Status.value,
      pageNo: currentPage.value.toString(),
      pageSize: pageSize.value.toString(),
    };
    console.log('params', params);
    return params;
  },
  columns: tableColumns,
  formConfig: searchForm,
  showTableSetting: true,
  useSearchForm: true,
  canResize: true,
  pagination: {
    current: currentPage,
    pageSize: pageSize,
    showSizeChanger: true,
    onChange: (page: number, size: number) => {
      currentPage.value = page;
      pageSize.value = size;
      reload();
    },
    onShowSizeChange: (current: number, size: number) => {
      currentPage.value = current;
      pageSize.value = size;
      reload();
    },
  },
});

const [registerDrawer, { openDrawer }] = useDrawer();

function handleForm(record: Recordable) {
  openDrawer(true, record);
}

function handleSuccess(record: Recordable) {
  reload({ record });
  // 重新计算表格高度
  nextTick(() => {
    if (tableRef.value) {
      tableHeight.value = tableRef.value.$el.offsetHeight;
    }
  });
}

// 监听 selectedMonth 和 maintenanceId 的变化，重新加载数据
watch([() => props.selectedMonth, () => props.maintenanceId, () => props.EquipmentTypeRef, () => props.EquipmentTypeCode], () => {
  reload();
  // 重新计算表格高度
  nextTick(() => {
    if (tableRef.value) {
      tableHeight.value = tableRef.value.$el.offsetHeight;
    }
  });
});
</script>

<style scoped lang="less">
.a-layout {
  display: flex;
}

.a-layout-sider {
  overflow: auto;
}

.a-layout-content {
  flex: 1;
  overflow: auto;
}
</style>